<template>
  <div id="app">
    <div class="tab-bar">
      <span
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: currentTab === index }"
        @click="changeTab(index)" >
        {{ tab.label }}
      </span>
    </div>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import Tab1Content from '/components/ParameterCalibration.vue'
import Tab2Content from '/components/ReverseCalibration.vue'
import Tab3Content from '/components/SurroundViewCalibration.vue'

export default {
  data() {
    return {
      tabs: [
        { label: 'Tab 1', component: Tab1Content },
        { label: 'Tab 2', component: Tab2Content },
        { label: 'Tab 3', component: Tab3Content }
      ],
      currentTab: 0
    }
  },
  computed: {
    currentComponent() {
      return this.tabs[this.currentTab].component
    }
  },
  methods: {
    changeTab(index) {
      this.currentTab = index
    }
  }
}
</script>

<style scoped>
.tab-bar {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}
.tab-bar span {
  padding: 10px;
  cursor: pointer;
}
.active {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}
</style>